<template>
  <view class="container">
    <!-- 绑定手机号 -->
    <view class="bindphone">
      <image src="../../static/icon/phone.png" mode="aspectFill" style="width: 30rpx; height: 40rpx; margin-right: 30rpx"></image>
      <input type="text" placeholder="请输入您的手机号" class="ipt" v-model="mobile" />
    </view>
    <!-- /验证码 -->
    <view class="bindphone">
      <image src="../../static/icon/phonecode.png" mode="aspectFill" style="width: 44rpx; height: 44rpx; margin-right: 30rpx"></image>
      <input type="text" placeholder="请输入短信验证码" v-model="captcha" />
      <view class="getcode" @click="getcode">{{ time == 60 ? '获取验证码' : `${time}秒后重新获取` }}</view>
    </view>
    <view class="fnok" @click="changeok">完成</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: 60,
      mobile: '',
      captcha: '',
      obj: {} // 用信息
    };
  },
  methods: {
    // 获取用户手机号
    getuserinfo() {},
    // 点击获取验证码
    getcode() {
      if (!/^1[3-9][0-9]{9}$/.test(this.mobile)) {
        return uni.showToast({
          title: '输入的手机号格式不正确',
          icon: 'none'
        });
      }
      if (this.time == 60) {
        let timer = setInterval(() => {
          this.time--;
          if (this.time == 0) {
            timer = clearInterval(timer);
            this.time = 60;
          }
        }, 1000);
      }
      uni.$http.post('/sms/send', {
        mobile: this.mobile,
        event: 'changemobile'
      });
    },
    // 检测验证码
    async changeok() {
      const res = await uni.$http.post('/sms/check', {
        mobile: this.mobile,
        event: 'changemobile',
        captcha: this.captcha
      });
      if (res.data.code == 1) {
        if (this.obj.identity_role) {
          this.obj.mobile = this.mobile;
          this.obj.username = this.obj.teacher_name;
        } else {
          this.obj.mobile = this.mobile;
        }
        uni.$http
          .post('/user/profileSave', {
            ...this.obj
          })
          .then((res) => {
            if (res.data.code == 1) {
              uni.navigateBack();
            }
          });
      }
    }
  },
  onLoad(e) {
    if (e.info) {
      console.log('修改的信息', JSON.parse(e.info));
      this.obj = JSON.parse(e.info);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .fnok {
    position: fixed;
    bottom: 80rpx;
    box-sizing: border-box;
    width: 670rpx;
    height: 90rpx;
    margin: 0 40rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    background: #3553e8;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
  .bindphone {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 670rpx;
    height: 100rpx;
    padding: 30rpx;
    background: #fff;
    margin: 0 40rpx;
    margin-bottom: 30rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f8f8f8;
    .ipt {
      flex: 1;
    }
    .getcode {
      box-sizing: border-box;
      width: 300rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #3553e8;
      margin-left: 30rpx;
      text-align: right;
    }
  }
}
</style>
